<template>
	<view class="content">
		<view :class="{cover:showNews}">
			<uni-nav-bar @clickLeft="showCal" @clickRight="toNews" backgroundColor="#F53D46" color="#fff" class="navibar" :border="false">
				<view class="title">{{$t('index.Home')}}</view>
				<!-- <view slot="left" class="left"><image class="icon" src="../../static/images/index/cacl-icon.png"></image></view> -->
				<view slot="right" class="right"><image class="icon" src="../../static/images/index/news-icon-2.png"></image></view>
			</uni-nav-bar>
			<!-- 顶部按钮列表 -->
			<view class="top-btn-wrap">
				<view class="btn" v-for="(item,index) in btns" :key="index" @click="handleToPage(item.path)">
					<image :src="item.icon" class="icon"></image>
					<text class="txt">{{item.txt}}</text>
				</view>
			</view>	
			<!-- 钱包 -->
			<view class="wallet-wrap" @click="handleToPage('/pages/personal/subpage/accountDetail/ye')">
				<view class="top">
					<text class="title">{{$t('index.Wallet')}}</text>
					<image class="icon" src="../../static/images/index/right.png"></image>
				</view>
				<view class="money-list">
					<view class="money-item">					
						<text class="money">{{indexinfo.wallet.usableSum}}</text>
						<text class="money-type">{{$t('index.VirtualCurrency')}}</text>
					</view>
					<view class="money-item">					
						<text class="money">{{indexinfo.wallet.cumulative}}</text>
						<text class="money-type">{{$t('index.Cumulative')}}</text>
					</view>
					<view class="money-item">					
						<text class="money">{{indexinfo.wallet.today_earning}}</text>
						<text class="money-type">{{$t('index.TodayEarning')}}</text>
					</view>
				</view>
			</view>	
			<!-- 消息滚动区域 -->
			<view class="new-scroll" @click="toNews" v-if="indexinfo.zj_list.length>0">
				<image src="../../static/images/index/horn.png" class="horn"></image>
				<swiper class="news-wrap" autoplay vertical circular>
					<swiper-item v-for="(item, index) in indexinfo.zj_list" :key="index">
						<view class="swiper-item">
							<view class="content">{{ item.name }}{{ item.remark }}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 工具，介绍区域 -->
			<!-- <view class="desc-wrap">
				<view v-for="(item,index) in descList" :key="index" class="desc-item" @click="handleClick(index)">
					<image :src="item.icon" class="bg"></image>
					<view class="txt">{{item.txt}}</view>
				</view>
			</view> -->
			<!-- 列表 -->
			<scroll-view  enhanced  class="scroll-tab" scroll-x scroll-with-animation>
				<view class="tab" v-for="(item,index) in indexinfo.goods_cate" :key="index" :class="{on:index==cur_goods_type}" @click="changeGoodsType(index)">{{item}}</view>	
			</scroll-view>

			<view class="goods-list" v-if="indexinfo.goods_list">
				<view class="good" v-for="(item,index) in indexinfo.goods_list[cur_goods_type].goods" :key="index" @click="grabGood(item.group_id)">
					<view class="name">Member</view>
					<view class="level">{{item.group_name}}</view>
					<view class="profit">{{item.profit_percent_num}}%</view>
					<view class="price">{{item.money_min}}  area</view>
					<image class="img" mode="aspectFit" :src="interfaceurl + item.imgsrc"></image>
				</view>			
			</view>
			<uni-popup class="cacl" ref="popup">
				<view class="cacl-box">
					<view class="title">收益计算器</view>
					<view class="item">
						<text>Amount</text>
						<input type="number" placeholder="输入金额" v-model="chargeMoney" />
					</view>
					<view class="item">
						<text>天数</text>
						<input type="number" placeholder="输入天数" v-model="days" />
					</view>
					<view class="item">
						<text>可盈利数额</text>
						<input type="number" placeholder="自动计算" v-model="profit" />
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 公共弹窗 -->
		<div v-if="showNews" class="news-popup">
			<div class="news-wrap">			
				<view class="icon-wrap">
					<image src="../../static/images/index/popup-icon.png" class="icon" mode="widthFix"></image>
				</view>
				<div class="content-wrap"><view class="txt-box">{{news.message}}</view></div>
				<div class="btn" @click="readMessage">read</div>
			</div>
		</div>	
		<ZTabbar :current="0" />
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import fetch from '@/common/fetch.js';
import ZTabbar from '@/components/ZTabbar/index.vue';
export default {
	components: { uniNavBar, uniPopup, ZTabbar },
	data() {
		return {
			showNews:false,
			news:{},
			animationData: {},
			platform: '',
			mygroupid: 0,
			indexinfo: {
				gonggao:[],
				goods_cate:[],
				wallet:{
					usableSum:'',cumulative:'',today_earning:''
				}
			},
			cur_goods_type:0,
			btns: [
				{
					icon: '../../static/images/index/top-btn-1.png',
					txt: this.$t('index.Financial'),
					path: '/pages/financial/index'
				},
				{
					icon: '../../static/images/index/top-btn-2.png',
					txt: this.$t('index.Recharge'),
					path: '/pages/recharge/index'
				},
				{
					icon: '../../static/images/index/top-btn-3.png',
					txt: this.$t('index.Withdrawal'),
					path: '/pages/withdraw/index'
				},
				{
					icon: '../../static/images/index/top-btn-4.png',
					txt: this.$t('index.Invitation'),
					path: '/pages/personal/subpage/share/index'
				}
			],
			descList:[
				{
					icon: '../../static/images/index/desc-bg-1.png',
					txt: this.$t('index.BriefIntroduction'),
					path: '/pages/personal/subpage/interest/index'
				},
				{
					icon: '../../static/images/index/desc-bg-2.png',
					txt: this.$t('index.CooperativeAgency'),
					path: '/pages/recharge/index'
				},
				{
					icon: '../../static/images/index/desc-bg-3.png',
					txt: this.$t('index.RuleDescription'),
					path: '/pages/withdraw/index'
				},
				{
					icon: '../../static/images/index/desc-bg-4.png',
					txt: this.$t('index.Calculator'),
					path: '/pages/personal/subpage/share/index'
				}
			],
			currule: 0,
			initTop: 0,
			days: '',
			chargeMoney: '',
			scrolltop:0
		};
	},
	computed: {
		scrollstyle() {
			return {
			  transform: `translateY(-${this.scrolltop}px)`
			};
		  },
		interfaceurl() {
			let url = fetch.interfaceUrl();
			return url;
		},
		profit() {
			let num = (this.days * this.chargeMoney * this.indexinfo.day_profit_config) / 100;
			return num;
		}
	},
	mounted() {
		this.getIndexInfo();
		this.getUserInfo();
		this.getMessage()		
	},
	onLoad() {
		if (this.$store.state.isUpdate) {
			uni.getSystemInfo({
				success: res => {
					//检测当前平台，如果是安卓则启动安卓更新
					if (res.platform == 'android') {
						this.AndroidCheckUpdate();
						this.platform = 'android';
					} else if (res.platform == 'ios') {
						this.IosCheckUpdate();
						this.platform = 'ios';
					}
				}
			});
		}
	},
	methods: {
		handleClick(index){
			switch (index) {
				case 0: 
				case 1:
				case 2: {
					uni.navigateTo({
						url:'/pages/callCenter/subpage/info/index?id='+this.indexinfo.xinwen[index].id
					})
					break;
				}
				case 3: {
					//this.showCal()
					break;
				}
			}
		},
		grabGood(level){
			if(this.mygroupid==level){
				uni.navigateTo({
					url: '/pages/grab/index'
				});
			}else{
				uni.showToast({
					title: 'You are not a member of this level and cannot purchase products',
					icon: 'none',
					duration: 1500
				});
			}
		},
		changeGoodsType(index){
			this.cur_goods_type = index;
		},
		/*轮播跳转*/
		handleSwiperNavi(url){
			var launchWebview = plus.webview.currentWebview();  
			launchWebview.evalJS('wap2app.open(url)');
		},
		/**
		 * 获取首页信息
		 */
		getUserInfo() {
			fetch.request('/ucenter/home', '', 'GET').then(res => {
				let { data } = res;
				this.mygroupid = data.group_id;
			});
		},
		/*
		*查询是否有弹窗公告
		*/
	   getMessage(){
		  fetch.request('/index/message/index', '', 'GET').then(res => {
		   	let { data } = res;			
			if(data.message){
				this.news = data;
				this.showNews = true
			}		   			   	
		   });
	   },
	   // 公告标记已读
		readMessage(){
			fetch.request('/index/message/read', {id:this.news.id}, 'GET').then(res => {
			 	this.showNews = false  			   	
			 });			
		},
		/**
		 * 获取首页信息
		 */
		getIndexInfo() {
			fetch.request('/index/Mobile/index', '', 'GET').then(res => {
				let { data } = res;
				this.indexinfo = data;
				setTimeout(() => {
					this.scroll();
				}, 2000);
			});
		},
		toNews() {
			uni.navigateTo({
				url: '/pages/news/index'
			});
		},
		handleToPage(url) {
			uni.navigateTo({
				url: url
			});
		},
		changeRule(index) {
			this.currule = index;
		},
		/*
		 *会员动态滚动
		 */
		scroll() {			
			var that = this;
			const query = uni.createSelectorQuery();
			var h = 0;
			var initTop = 0;
			var maxh = 0;
			query.select('.member-list').boundingClientRect(data => {	
			  h = data ? data.height+10 : 0
			}).exec();
			query.select('.memberbox').boundingClientRect(data => {
			  maxh = data ? data.height :0
			}).exec();
			
			var time = setInterval(function() {
				initTop += h;
				if (initTop > maxh) {
					initTop = 0;
				}
				that.scrolltop = initTop
				
				var animation = uni.createAnimation({
				      duration: 1000,
				        timingFunction: 'ease',
				    })				
				that.animation = animation				
				that.animation.translate(0, -initTop).step({ duration: 1000 })	
				 that.animationData = that.animation.export()
			}, 1000);
		},
		showCal() {
			this.$refs.popup.open();
		},
		checkAndroidVersionByLocal() {
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
				try {
					let version = wgtinfo.versionCode;
					if (version) {
						this.version = version;
					}
				} catch (e) {
					this.version = 0;
				}
				console.log(wgtinfo.versionCode);
			});
			// #endif
		},
		IosCheckUpdate() {
			this.checkAndroidVersionByLocal();
			fetch.request('/index/Pub/version', '', 'GET').then(res => {
				if (res.code == 1 || res.code == '1') {
					let server_version = res.data.version;
					this.wget_url = res.data.wgt_url;
					try {
						uni.setStorageSync('version', server_version);
					} catch (e) {
						// error
					}
					console.log(server_version);
					this.checkVersionToLoadUpdate(server_version, this.version);
				}
			});
		},
		AndroidCheckUpdate() {
			this.checkAndroidVersionByLocal();
			fetch.request('/index/Pub/version', '', 'GET').then(res => {
				console.log(res);
				if (res.code == 1 || res.code == '1') {
					let server_version = res.data.version;
					this.wget_url = res.data.wget_url;
					try {
						uni.setStorageSync('version', server_version);
					} catch (e) {
						// error
					}
					console.log(server_version);
					this.checkVersionToLoadUpdate(server_version, this.version);
				}
			});
		},
		checkVersionToLoadUpdate(server_version, curr_version) {
			console.log(server_version);
			console.log(curr_version);
			if (server_version > curr_version) {
				if (plus.networkinfo.getCurrentType() != 3) {
					uni.showToast({
						//有新的版本发布，您目前非Wifi连接，请您连接WIFI之后,重启应用检测更新
						title: 'A new version has been released. You are not connected to WiFi at present. Please restart the application to detect the update after connecting to WiFi',
						mask: true,
						duration: 5000,
						icon: 'none'
					});
					this.$store.commit('notUpdate');
					return;
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						//有新的版本发布，将自动后台下载更新。下载后将自动弹出安装程序
						title: 'There is a new version released, will automatically download updates in the background. The installation program will pop up automatically after downloading',
						duration: 5000
					});
					//设置 最新版本apk的下载链接
					let downloadApkUrl = this.wget_url;

					uni.showModal({
						title: 'Update version',//版本更新
						//有新的版本发布，检测到您当前为Wifi连接，是否立即进行新版本下载？
						content: 'A new version has been released. It is detected that you are currently connected to WiFi. Do you want to download the new version now?',
						confirmText: 'Update Now',//立即更新
						cancelText: 'Later',//稍后进行
						success: res => {
							if (res.confirm) {
								uni.showToast({
									icon: 'none',
									mask: true,
									//有新的版本发布，检测到您目前为Wifi连接，程序已启动自动更新。新版本下载完成后将自动弹出安装程序
									title: 'A new version has been released. It is detected that you are currently connected to WiFi. The program has started automatic update. After downloading the new version, the installation program will pop up automatically',
									duration: 5000
								});
								console.log(downloadApkUrl);
								console.log(this.platform);
								if (this.platform === 'ios') {
									plus.downloader
										.createDownload(downloadApkUrl, { filename: '_doc/update/' }, (d, status) => {
											if (status === 200) {
												plus.runtime.install(
													d.filename,
													{},
													function() {
														plus.runtime.restart();
													},
													function(e) {
														uni.showToast({
															title: 'Installation Failed',//安装失败
															duration: 1500
														});
													}
												);
											} else {
												uni.showToast({
													title: 'Download Failed',//下载失败
													duration: 1500
												});
											}
										})
										.start();
								} else {
									let dtask = plus.downloader.createDownload(downloadApkUrl, {}, (d, status) => {
										// 下载完成
										console.log(status);
										if (status == 200) {
											plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(error) {
												uni.showToast({
													title: 'Installation Failed',
													duration: 1500
												});
											});
										} else {
											uni.showToast({
												title: 'Download Failed',
												duration: 1500
											});
										}
									});
									dtask.start();
								}
							} else if (res.cancel) {					
								this.$store.commit('notUpdate');
							}
						}
					});
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
.cover{
	filter:blur(5px);
}
// 公告弹窗
.news-popup{
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	.news-wrap{
		width: 600rpx;
		height: 763rpx;
		border-radius: 40rpx;
		background-color: #fff;
		background: url('../../static/images/index/newsbg.png') no-repeat;
		background-size:100%;
		background-position: 0 0;		
		position: relative;
		.icon-wrap{
			position: absolute;
			top: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 120rpx;
			height: 120rpx;
			background: url('../../static/images/index/popup-circle.png') no-repeat;
			background-size:100%;
			background-position: 0 0;	
			.icon{
				width: 50rpx;
				height: 60rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top:20%;
			}
		}
		.content-wrap{
			width: 500rpx;
			height: 580rpx;
			margin-left:50rpx;
			margin-top: 60rpx;
			border-radius: 40rpx;
			background-color: #fff;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);		
			padding: 100rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			.txt-box{
				overflow: auto;
				height: 100%;
			}
		}
		.btn{
			width: 200rpx;
			height: 60rpx;
			font-size: 30rpx;
			color:#fff;
			background: #F53D46;
			border-radius: 60rpx; 
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			background-image: linear-gradient(#fd5f57, #fa8879);
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			line-height: 60rpx;
			text-align: center;
			transform: translateX(-50%);
		}
	}
}

@font-face {
	font-family: 'ESPYXN';
	src: url('../../static/iconfont/ESPYXN_DINEngschriftStd.ttf');
}
page,
.content {
	background-color: #FAFAFD;
}
.navibar {
	.right {
		display: flex;
		align-items: center;
		.icon {
			width: 48rpx;
			height: 48rpx;
		}
	}
}
.top-btn-wrap{
	display: flex;
	padding: 30rpx 0;
	.btn{
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.icon{
			width: 140rpx;
			height:90rpx;
			margin-bottom: 30rpx;
		}
		.txt{			
			font-size: 22rpx;
			font-weight: 400;
			color: #1E1E1F;
			line-height: 22rpx;
		}
	}
}
.wallet-wrap{
	width: 690rpx;
	height: 218rpx;
	margin: 20rpx 30rpx 40rpx 30rpx;
	background: #FFFFFF;
	box-shadow: 0px 10rpx 20rpx 0px rgba(30,30,31,0.06);
	border-radius: 16rpx;
	padding: 30rpx 30rpx 30rpx 40rpx;
	position: relative;
	font-family: "ESPYXN";
	.top{		
		.title{
			font-size: 30rpx;
			font-weight: 400;
			color: #1E1E1F;
			line-height: 30rpx;
		}
		.icon{
			position: absolute;
			top: 30rpx;
			right:10rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.money-list{
		display: flex;
		margin-top: 40rpx;
		.money-item{
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.money{
				font-size: 56rpx;
				line-height: 45rpx;
				color: #1E1E1F;
			}
			.money-type{
				margin-top: 14rpx;
				font-size: 22rpx;
				color: #A4A4AD;
				line-height: 22rpx;
			}
		}
	}
}
.new-scroll{
	padding: 0 30rpx 40rpx 30rpx;
	display: flex;
	align-items: center;
	.horn{
		width:27rpx;
		height:24rpx;
		margin-right: 30rpx;
	}
	.news-wrap{
		width:calc(100% - 54rpx);
		height: 30rpx;
		font-size: 24rpx;
		color:#F53D46;
		.content{
			width:100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
.desc-wrap{
	padding: 0 30rpx;
	overflow:hidden;
	.desc-item{
		display: inline-block;
		width: 336rpx;
		height:160rpx;
		position: relative;	
		padding:50rpx 0 0 30rpx;
		box-sizing: border-box;	
		float: left;
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 336rpx;
			height:160rpx;
		}
		.txt{
			position: relative;			
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 36rpx;
			width: 240rpx;
			height: 72rpx;
			overflow-wrap: break-word;
		}
	}
	.desc-item:nth-child(even){
			margin-left: 18rpx;
		}
}
.scroll-tab{
	line-height: 88rpx;
	white-space:nowrap;
	box-sizing: border-box;
	position: relative;
	::after{
		content:'';
		position: absolute;
		height: 1px;
		transform: scaleY(0.5);
		background: #E6E6EB;
		width: 100%;
		left: 0;
		bottom: 0;
	}
	.tab{
		display: inline-block;				
		font-size: 32rpx;
		font-weight: 400;
		color: #1E1E1F;	
		position: relative;
		min-width: 100rpx;
		text-align: center;
		margin-left: 30rpx;	
	}
	.on{
		font-size: 32rpx;
		font-weight: 400;
		color: #F53D46;				
	}
	.on::after{
		content:'';
		position:absolute;
		bottom:8rpx;
		left:50%;
		transform: translateX(-50%);
		background: #F53D46;
		width: 20rpx;
		height: 8rpx;
		border-radius: 8rpx;
	}
}
.goods-list{
	padding: 30rpx;
	box-sizing: border-box;
	overflow: hidden;
	.good{
		width: 330rpx;
		height: 420rpx;
		background: url('../../static/images/index/good-bg.png') no-repeat;
		background-size: 100% 100%;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;	
		position:relative;			
		.img{
			width: 280rpx;
			height:300rpx;
		}
		.name{
			position:absolute;
			left:0;
			width:34%;
			height:40rpx;
			line-height:40rpx;
			text-align:center;
			top:0;
			font-size:22rpx;
			color:#fff;
		}
		.level{
			position:absolute;
			left:30%;
			width:34%;
			height:40rpx;
			line-height:40rpx;
			text-align:center;
			top:0;
			font-size:22rpx;
			color:#F53D46;
		}
		.profit{
			position:absolute;
			left:0;
			width:34%;
			height:60rpx;
			line-height:60rpx;
			text-align:center;
			bottom:0;
			font-size:30rpx;
			color:#fff;
		}
		.price{
			position:absolute;
			right:10%;
			width:40%;
			height:50rpx;
			line-height:50rpx;
			text-align:center;
			bottom:0;
			font-size:22rpx;
			color:#fff;
		}
	}
	.good:nth-child(even){
			margin-left: 30rpx;
		}
}
.cacl {
	.cacl-box {
		width: 600rpx;
		overflow: hidden;
		border-radius: 20rpx;
		background-color: #fff;
		font-size: 12px;
		margin: 0 auto;
		.title {
			text-align: center;
			padding: 40rpx 0;
		}
		.item {
			border-top: solid 1rpx #f4f4f4;
			display: flex;
			height: 100rpx;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.label {
				color: #91a1a4;
			}
			input {
				font-size: 12px;
				width: 60%;
				text-align: right;
				color: #959595;
			}
		}
	}
}

</style>
